一、
两边侧边栏一个左浮动一个右浮动并且宽度是一定的,这样两边就脱离了文档流,然后中间的部分就会在两个侧边栏的下面,只要留出两边宽度的margin值,中间就可以自适应了。
值得注意的是center部分的html要写在两个侧边栏下面,否则两个侧边栏会一高一低
简单,兼容性好,但需要清除浮动
// style部分
.left{
width: 100px;
height: 500px;
/* background: blue; */
float: left;
}
.right{
width: 100px;
height: 500px;
/* background: yellow; */
float: right;
}
.center{
height: 500px;
margin: 0 100px;
background: red;
}
// html部分
<div class="left">我是左边栏</div>
<div class="right">我是右边栏</div>
<div class="center">我是中间内容</div>
复制代码
二、
使用绝对定位将两个盒子定位在左上角和右上角,原理与一方法差不多,也是利用脱离文档流。
值得注意的是这种方式html的顺序是不影响布局的
// style部分
*{
margin: 0;
padding: 0;
}
.left{
width: 100px;
height: 500px;
background: blue;
position: absolute;
left: 0;
top: 0;
}
.right{
width: 100px;
height: 500px;
background: yellow;
position: absolute;
right: 0;
top: 0;
}
.center{
height: 500px;
margin: 0 100px;
background: red;
}
// html部分
<div class="left">我是左边栏</div>
<div class="center">我是中间内容</div>
<div class="right">我是右边栏</div>
复制代码
三、
flex布局,父盒子display: flex
,中间自适应部分flex:1
,两侧固定宽高。
// style部分
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
width: 100px;
height: 500px;
background: blue;
}
.right{
width: 100px;
height: 500px;
background: yellow;
}
.center{
height: 500px;
flex: 1;
background: red;
}
// html部分
<div class="container">
<div class="left">我是左边栏</div>
<div class="center">我是中间内容</div>
<div class="right">我是右边栏</div>
</div>
复制代码
非常简单直接,就是兼容性不太好,不能兼容IE8以下的浏览器
四、
表格布局,父级盒子设置display: table;width: 100%;
,子级盒子display: table-cell;
,左右两侧栏设置定宽。
兼容性比flex布局好点,但是当其中一个单元格高度超出的时候,两侧的单元格也是会跟着一起变高的
// style部分
*{
margin: 0;
padding: 0;
}
.container{
display: table;
width: 100%;
}
.left{
width: 100px;
height: 500px;
background: blue;
display: table-cell;
}
.right{
width: 100px;
height: 500px;
background: yellow;
display: table-cell;
}
.center{
height: 500px;
background: red;
/* display: table-cell; */
}
// html部分
<div class="container">
<div class="left">我是左边栏</div>
<div class="center">我是中间内容</div>
<div class="right">我是右边栏</div>
</div>
复制代码
五、
grid布局,父级盒子设置display: grid;
,并且设置好有几行几列和宽高,轻松实现。
兼容性不太好
// style部分
*{
margin: 0;
padding: 0;
}
.container{
display: grid;
grid-template-rows: 500px;
grid-template-columns: 100px auto 100px;
}
.left{
background: blue;
}
.right{
background: yellow;
}
.center{
background: red;
}
// html部分
<div class="container">
<div class="left">我是左边栏</div>
<div class="center">我是中间内容</div>
<div class="right">我是右边栏</div>
</div>
复制代码